<template>
  <div class="voice-controller" v-if="audioState.isPlaying || audioState.isPaused">
    <div class="voice-panel">
      <!-- 播放控制 -->
      <div class="playback-controls">
        <el-button 
          type="primary" 
          :icon="audioState.isPlaying ? VideoPause : VideoPlay"
          circle 
          size="small"
          @click="togglePlayback"
          :loading="audioState.isLoading"
        />
        
        <el-button 
          :icon="Close" 
          circle 
          size="small"
          @click="stopPlayback"
        />
      </div>
      
      <!-- 进度条 -->
      <div class="progress-section">
        <span class="time-display">
          {{ formatTime(audioState.currentTime) }}
        </span>
        
        <el-slider
          v-model="currentTime"
          :max="audioState.duration"
          :step="0.1"
          :show-tooltip="false"
          @change="onSeek"
          class="progress-slider"
        />
        
        <span class="time-display">
          {{ formatTime(audioState.duration) }}
        </span>
      </div>
      
      <!-- 音量和速度控制 -->
      <div class="audio-controls">
        <!-- 音量控制 -->
        <div class="volume-control">
          <el-icon><Mute v-if="audioState.volume === 0" /><Bell v-else /></el-icon>
          <el-slider
            v-model="volume"
            :max="1"
            :step="0.01"
            :show-tooltip="false"
            @change="onVolumeChange"
            class="volume-slider"
          />
        </div>
        
        <!-- 播放速度 -->
        <div class="speed-control">
          <el-dropdown @command="onSpeedChange">
            <el-button size="small" text>
              {{ playbackRate }}x
              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="0.5">0.5x</el-dropdown-item>
                <el-dropdown-item command="0.75">0.75x</el-dropdown-item>
                <el-dropdown-item command="1">1x</el-dropdown-item>
                <el-dropdown-item command="1.25">1.25x</el-dropdown-item>
                <el-dropdown-item command="1.5">1.5x</el-dropdown-item>
                <el-dropdown-item command="2">2x</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { 
  VideoPlay, 
  VideoPause, 
  Close, 
  ArrowDown,
  Mute,
  Bell 
} from '@element-plus/icons-vue'
import { useVoice } from '../../services/voice'

// 语音服务
const { 
  audioState, 
  toggle, 
  stop, 
  setVolume, 
  setPlaybackRate, 
  seekTo 
} = useVoice()

// 本地状态
const currentTime = ref(0)
const volume = ref(0.8)
const playbackRate = ref(1)

// 监听音频状态变化
watch(() => audioState.currentTime, (newTime) => {
  currentTime.value = newTime
})

watch(() => audioState.volume, (newVolume) => {
  volume.value = newVolume
})

watch(() => audioState.playbackRate, (newRate) => {
  playbackRate.value = newRate
})

// 方法
const togglePlayback = () => {
  toggle()
}

const stopPlayback = () => {
  stop()
}

const onSeek = (time: number) => {
  seekTo(time)
}

const onVolumeChange = (vol: number) => {
  setVolume(vol)
}

const onSpeedChange = (speed: string) => {
  const rate = parseFloat(speed)
  playbackRate.value = rate
  setPlaybackRate(rate)
}

const formatTime = (seconds: number): string => {
  if (!seconds || isNaN(seconds)) return '0:00'
  
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${mins}:${secs.toString().padStart(2, '0')}`
}
</script>

<style scoped>
.voice-controller {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid #e5e7eb;
  min-width: 400px;
}

.voice-panel {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.playback-controls {
  display: flex;
  gap: 8px;
}

.progress-section {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.time-display {
  font-size: 12px;
  color: #6b7280;
  min-width: 32px;
  text-align: center;
}

.progress-slider {
  flex: 1;
  margin: 0 8px;
}

.audio-controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
}

.volume-slider {
  width: 60px;
}

.speed-control {
  min-width: 60px;
}

/* 暗色主题支持 */
.dark .voice-controller {
  background: #1f2937;
  border-color: #374151;
}

.dark .time-display {
  color: #9ca3af;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .voice-controller {
    bottom: 60px;
    left: 16px;
    right: 16px;
    transform: none;
    min-width: auto;
  }
  
  .voice-panel {
    padding: 12px 16px;
    gap: 12px;
  }
  
  .audio-controls {
    gap: 12px;
  }
  
  .volume-control {
    min-width: 80px;
  }
  
  .volume-slider {
    width: 50px;
  }
}
</style> 